<template>
    <div style="margin-left: 180px;padding-top: 15px;background-color: white;width: 1175px;">
        <div style="background-color: #006bb7;height: 50px;line-height:50px">
            <span style="color: white;font-size: 20px;margin-left: 20px;">商品</span>
        </div>
        <div style="background-color: white;margin-top: 10px;">
            <el-row>         
                <el-col :span="6" v-for="(item) in goodsList" :key="item.id"  style="height: 300px;">
                    <div class="goodsPicture" @click="goodsDetail(item.id)">
                        <img v-if="item.picture" :src="item.picture" class="avatar" width="280px" height="200px">
                        <p style="font-size: 10px;text-align: center;margin-top: 20px;">{{ item.name }}</p>
                    </div>                                                                   
                </el-col>        
            </el-row>
        </div>
    </div>
</template>

<script>
import goodsApi from "@/api/goods/goods";
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 12,
            goodsList: [],
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData(){
            goodsApi.pageList(this.pageNum,this.pageSize,{})
            .then(response =>{
                this.goodsList = response.data.records
                console.log(this.goodsList);
            })
        },
        goodsDetail(id){
            let routeUrl = this.$router.resolve({
                path: '/shouye/goods/goodsDetail',
                query: {
                    id: id
                }
            })
            window.open(routeUrl.href, '_blank')
        }
    },
}
</script>

<style>
  .goodsPicture{
    position: relative;
    cursor: pointer;
    overflow: hidden;
  }

  .goodsPicture img{
    transition: all 0.8s;
  }
  .goodsPicture img:hover {
      transform: scale(1.1);
  }

  .goodsPicture:hover{
    color: rgb(88, 162, 246);
  }
#app{
    background: rgb(246, 246, 246);
    height: 100%;
    overflow: scroll;
  }
</style>